<template>
	<view class="container-myteam">
		<view class="login-top">
			<view class="login-top-view">
				<view class="login-top-back">
					<uni-icons color="#fff" type="left" size="26" @click="back"></uni-icons>
				</view>
				<view class="login-top-text">
					{{$t('签到')}}
				</view>
				<view class="login-top-lang"></view>
			</view>
			<view class="reward-view">
				<view class="reward-text">
					<span class="cumulative">{{$t('您已经累计签到')}}</span>
					<span class="cumulativeNum">{{info.qiandao_num}}</span>
					<span class="cumulativeText">{{$t('天')}}</span>
				</view>
			</view>
			<view class="">
				<view class="sign_btn_bg">
					<span  class="sign_btn">{{$t('签到成功')}}</span>
				</view>
			</view>
		</view>
		<view class="">
			<view class="calendar-content" v-if="showCalendar">
					<view>
						<!-- 插入模式 -->
						<uni-calendar class="uni-calendar--hook" :selected="infos.selected" :showMonth="false" @change="change" @monthSwitch="monthSwitch" />
					</view>
					<!-- <uni-section class="hideOnPc" title="弹出模式" type="line"></uni-section>
					<view class="example-body hideOnPc">
						<button class="calendar-button" type="button" @click="open">打开日历</button>
					</view>
					<uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="true" :date="info.date" :insert="info.insert" :lunar="info.lunar" :startDate="info.startDate"
					 :endDate="info.endDate" :range="info.range" @confirm="confirm" @close="close"/> -->
				</view>
		</view>
		<view class="today">
			<p class="today-view-p">{{$t('今日签到奖励')}}</p>
			<view class="today-view">
				<view class="today-left-view">
					<p class="today-left-cashp"><span class="today-left-sign">$</span><span class="today-left-num">{{info.today_qiandao}}</span></p>
					<p class="today-left-cash">{{$t('现金')}}</p>
				</view>
				<view class="today-right-view">
					<p class="today-left-cash2">{{$t('现金')}}</p>
					<p class="today-left-account">{{$t('直接发放至账户余额')}}</p>
				</view>
			</view>
		</view>
		<view class="rewardList-view">
			<p class="today-view-p">{{$t('累计签到奖励')}}</p>
			<view class="reward-steps">
				<!-- <uni-section title="基本用法" type="line" padding> -->
					<uni-steps :options="list1" :active="active" />
					<view class="reward-sign-view">
						<view class="reward-sign" :style="'width: '+info.bfb+'%;'" v-for="(item,index) in rewardList" :keys="item.index">
							<p class="reward-icon"><image src="../../static/my/21.png" class="reward-imgage"></image></p>
							<p class="reward-num-text">${{item.num}}</p>
							<p class="reward-btnStatu">
								<span v-if="item.status == 0">{{$t('未完成')}}</span>
								<span v-if="item.status == 1">{{$t('已完成')}}</span>
							</p>
						</view>
						
					</view>
				<!-- </uni-section> -->
			</view>
		</view>
		<view class="">
			<p class="tips">{{$t('备注')}}： {{$t('奖励红包直接发放到账户余额中，请注意查收')}}</p>
		</view>
		<!-- <view class="">
			<uni-popup ref="popup">
				<view class="popup-content" type="center">
					<view class="share_inner">
						<view class="white_bg">
							<image src="../../static/my/13.png" class="erweiCode"></image>
							<view  class="basic_btn">保存图片</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view> -->
	</view>
</template>

<script>
	// 获取任意时间
	function getDate(date, AddDayCount = 0) {
		if (!date) {
			date = new Date()
		}
		if (typeof date !== 'object') {
			date = date.replace(/-/g, '/')
		}
		const dd = new Date(date)
		dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
		const y = dd.getFullYear()
		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
		return {
			fullDate: y + '-' + m + '-' + d,
			year: y,
			month: m,
			date: d,
			day: dd.getDay()
		}
	}
	export default {
		components: {},
		data() {
			return {
				rewardList:[
					// {
					// 	num:'8.00',
					// 	statutext:"未完成"
					// },
					// {
					// 	num:'10.00',
					// 	statutext:"未完成"
					// },
					// {
					// 	num:'13.00',
					// 	statutext:"未完成"
					// },
					// {
					// 	num:'15.00',
					// 	statutext:"未完成"
					// },
					// {
					// 	num:'20.00',
					// 	statutext:"未完成"
					// },
					// {
					// 	num:'25.00',
					// 	statutext:"未完成"
					// },
					// {
					// 	num:'30.00',
					// 	statutext:"未完成"
					// }
				],
				showCalendar: false,
				infos: {
					lunar: true,
					range: true,
					insert: false,
					selected: []
				},
				active: 1,
				list1: [
					// {
					// 	title: '3天'
					// }, 
					// {
					// 	title: '7天'
					// }, 
					// {
					// 	title: '15天'
					// }, 
					// {
					// 	title: '20天'
					// },
					// {
					// 	title: '25天'
					// },
					// {
					// 	title: '30天'
					// },
					// {
					// 	title: '50天'
					// }
				],
				info:{},
				y:"",
				m:""
			}
		},
		onReady() {
			this.$nextTick(() => {
				this.showCalendar = true
			})
			// TODO 模拟请求异步同步数据
			// setTimeout(() => {
			// 	this.infos.date = getDate(new Date(),-30).fullDate
			// 	this.infos.startDate = getDate(new Date(),-60).fullDate
			// 	this.infos.endDate =  getDate(new Date(),30).fullDate
			// 	this.infos.selected = [{
			// 			date: getDate(new Date(),-3).fullDate,
			// 			info: '打卡'
			// 		},
			// 		{
			// 			date: getDate(new Date(),-2).fullDate,
			// 			info: '签到',
			// 			data: {
			// 				custom: '自定义信息',
			// 				name: '自定义消息头'
			// 			}
			// 		},
			// 		{
			// 			date: getDate(new Date(),-1).fullDate,
			// 			info: '已打卡'
			// 		}
			// 	]
			// 	console.log(this.infos.selected)
			// }, 2000)
		},
		onShow() {
			this.getinfo('','')
		},
		methods: {
			getinfo(y,m){
				this.$http.get(
					'api/qiandao/index',//接口名
					{y:y,m:m},//参数合集
					{},
					false
				).then(res=>{
					this.info = res.data
					this.list1 = res.data.qiandao1
					this.rewardList = res.data.qiandao2
					this.active = res.data.start
					this.infos.selected = res.data.alldate
				},(err)=>{//失败的操作
					uni.showToast({
						icon: 'error',
						title: err.data.message
					});
				})
			},
			qd(fulldate){
				let that = this
				that.$http.post(
					'api/qiandao/create',//接口名
					{date:fulldate},//参数合集
				).then(res=>{
					uni.showToast({
						icon: 'success',
						title: res.msg
					});
					setTimeout(function(){
						that.getinfo(that.y,that.m)
					},1500)
				},(err)=>{//失败的操作
					uni.showToast({
						icon: 'error',
						title: err.data.message
					});
				})
			},
			back(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			open() {
				this.$refs.calendar.open()
			},
			close(){
				console.log('弹窗关闭');
			},
			changeStatu() {
				if (this.active < this.list1.length - 1) {
					this.active += 1
				} else {
					this.active = 0
				}
			},
			change(e) {
				//签到
				this.qd(e.fulldate)
				// console.log('change 返回:', e)
				// // 模拟动态打卡
				// if (this.info.selected.length > 5) return
				// this.info.selected.push({
				// 	date: e.fulldate,
				// 	info: '打卡'
				// })
			},
			confirm(e) {
				// console.log('confirm 返回:', e)
			},
			monthSwitch(e) {
				// console.log('monthSwitchs 返回:', e)
				this.y = e.year
				his.y = e.month
				this.getinfo(e.year,e.month)
			}
		}
	}
</script>

<style scoped>
	.tips{
		width: 100%;
		padding: 0 15px;
		padding-bottom:65px;
		font-size: 12px;
		color: #f12211;
		line-height: 17px;
		margin-top: 7px;
	}
	.rewardList-view{
		background-color: #fff;
		width:100%;
	}
	.reward-steps{
		width:100%;
		overflow-x: scroll;
		overflow-y: hidden;
		white-space: nowrap;
	}
	.reward-sign-view{
		/* margin:0 30rpx; */
		display: flex;
	}
	.reward-sign{
		width:14.28%;
		text-align: center;
		
	}
	.reward-btnStatu{
		border-radius: 20px;
		border-style: solid;
		border-width: 1px;
		height: 20px;
		font-size: 12px;
		min-width: 50px;
		background-size: 100% 100%;
		color: #ff1300;
		text-align: center;
		line-height: 20px;
		
	}
	.reward-btnStatu span{
		
	}
	.reward-num-text{
		text-align: center;
		line-height: 17px;
		font-size: 12px;
		color: #f12211;
		font-weight: 700;
		margin-top:-10px;
		margin-bottom:10px;
	}
	.reward-imgage{
		width:50px;
		height:50px;
	}
	.today-left-account{
		color: rgba(0, 0, 0, .8);
		line-height: 14px;
		margin-top: 20px;
		font-size:24rpx;
	}
	.today-left-cash2{
		color: rgba(0, 0, 0, .8);
		line-height: 14px;
		margin-top:20px;
		font-weight: 700;
		font-size:24rpx;
	}
	.today-left-cashp{
		margin-top:30rpx;
	}
	.today-left-cash{
		font-size: 12px;
		margin-top: 4px;
		line-height: 17px;
	}
	.today-left-num{
		height: 42px;
		line-height: 42px;
		font-size: 28px;
		font-weight: 700;
	}
	.today-left-sign{
		font-size: 18px;
	}
	.today{
		width: 100%;
		margin: 12px auto 0 auto;
		padding: 7px 7px 13px 7px;
		background-color: #fff;
	}
	.today-left-view{
		width:228rpx;
		height:176rpx;
		background-color: red;
		color:#fff;
		text-align: center;
		margin-right:30rpx;
	}
	.today-right-view{
		flex:1;
	}
	.today-view-p{
		margin-left: 2px;
		height: 25px;
		font-size: 14px;
		font-weight: 600;
		color: #000;
		line-height: 20px;
		padding-bottom: 5px;
		border-bottom: 1px solid #f6f6f6;
		margin-bottom: 13px;
	}
	.today-view{
		display: flex;
	}

	.container-myteam{
		background-color: #f6f6f6;
	}
	.login-top{
		width:100%;
		height:352rpx;
		background: url('../../static/my/19.png') no-repeat 50%;
		background-size: 100% 100%;	
		border-radius: 0 0 20% 20%;
	}
	.login-top-view{
		display: flex;
		height:88rpx;
		line-height: 88rpx;
	}
	.login-top-back{
		margin-left:20rpx;
	}
	.login-top-back,.login-top-lang{
		width:20%;
	}
	.login-top-lang{
		text-align: right;
	}
	.login-top-text{
		width:60%;
		text-align: center;
		font-size: 36rpx;
		font-weight: 500;
		color: #fff;
	}
	.loginlang{
		width:72rpx;
		height:72rpx;
		vertical-align: middle;
	}
	.reward-view{
		text-align: center;
	}
	.cumulative{
		font-size: 15px;
		color: #feed9f;
		font-weight: 500;
		line-height: 21px;
	}
	.cumulativeNum{
		font-size: 30px;
		font-weight: 600;
		line-height: 42px;
		color: #fff;
		margin: 0 5px;
	}
	.cumulativeText{
		font-size: 15px;
		color: #feed9f;
		font-weight: 500;
		line-height: 21px;
	}
	.sign_btn_bg{
		background: url('../../static/my/20.png') no-repeat 50%;
		background-size: auto 100%;
		pointer-events: none;
		text-align: center;
		width: 151px;
		height: 51px;
		margin: 6px auto 0 auto;
		font-weight: 700;
	}
	.sign_btn{
		line-height: 35px;
		font-size: 16px;
		color: #ff3e18;
	}
	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}
	.calendar-button {
		flex: 1;
		font-weight: bold;
		font-size: 32rpx;
	}
</style>